<template>
  <div class="HRAndContract">
    <headerBox :leftData="leftData"></headerBox>
    <div class="HRAndContract_content">
      <div class="HRAndContract_content_top">
        <div class="HRAndContract_chart" @click="goToUrl(0)">
          <div class="title"> {{ time }}(日度)薪酬明细组合图</div>
          <lineBarChart ref="projectWageTrendChart" id="projectWageTrendChart" width="100%" height="90%"></lineBarChart>
        </div>
        <div class="HRAndContract_table">
          <tableBox :data="tableData" :show-serial-number="false" :showThead="true" :thead-list="tableThead">
          </tableBox>
        </div>
      </div>
      <div class="HRAndContract_content_bottom">
        <div class="HRAndContract_content_item" @click="goToUrl(1)">
          <div class="title">项目人员在岗率</div>
          <pieChart id="staffOnDutyRate" ref="staffOnDutyRate" height="55%"></pieChart>
          <tableBox :data="stastaffOnDutyData" :show-serial-number="false" :showThead="true"
            :thead-list="staffOnDutyThead">
          </tableBox>
        </div>
        <div class="HRAndContract_content_item" @click="goToUrl(2)">
          <div class="title">日计划完成率</div>
          <pieChart id="dailyPlanRate" ref="dailyPlanRate" height="55%"></pieChart>
          <tableBox :data="dailyPlanData" :show-serial-number="false" :showThead="true" :thead-list="dailyPlanThead">
          </tableBox>
        </div>
        <div class="HRAndContract_content_item" @click="goToUrl(2)">
          <div class="title">专项计划完成率</div>
          <pieChart id="specialPlanRate" ref="specialPlanRate" height="55%"></pieChart>
          <tableBox :data="specialPlanData" :show-serial-number="false" :showThead="true"
            :thead-list="specialPlanThead">
          </tableBox>
        </div>
        <div class="HRAndContract_content_item" @click="goToUrl(3)">
          <div class="title">投诉处置完成率</div>
          <pieChart id="complaintRate" ref="complaintRate" height="55%"></pieChart>
          <tableBox :data="complaintData" :show-serial-number="false" :showThead="true" :thead-list="complaintThead">
          </tableBox>
        </div>
        <div class="HRAndContract_content_item" @click="goToUrl(4)">
          <div class="title">培训完成率</div>
          <pieChart id="trainRate" ref="trainRate" height="55%"></pieChart>
          <tableBox :data="trainData" :show-serial-number="false" :showThead="true" :thead-list="trainThead">
          </tableBox>
        </div>
        <div class="HRAndContract_content_item" @click="goToUrl(5)">
          <div class="title">项目员工在保率</div>
          <pieChart id="insuranceRate" ref="insuranceRate" height="55%"></pieChart>
          <tableBox :data="insuranceData" :show-serial-number="false" :showThead="true" :thead-list="insuranceThead">
          </tableBox>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import headerBox from "../components/header.vue"
import tableBox from "../components/tableBox.vue"
import pieChart from "../components/pieChart.vue"

import lineBarChart from "../components/lineBarChart.vue"
import { getMonthSalary, getMonthSalaryTable, getProjectPostRate, getSunWorkPlanSuccessRate, getSpecialWorkPlanSuccessRate, getComplaintsSuccessRate, getTrainSuccessRate, getInsuranceRate } from "@/api/bi/HRAndContract";
export default {
  components: { headerBox, lineBarChart, tableBox, pieChart },
  data() {
    return {
      leftData: {
        title: '人资履约',
        desc: 'HR and Contract Performance'
      },
      tableThead: ['科目', '金额'],
      tableData: [],
      staffOnDutyThead: ['科目', '人数'],
      stastaffOnDutyData: [],
      dailyPlanThead: ['科目', '数量'],
      dailyPlanData: [],
      specialPlanThead: ['科目', '数量'],
      specialPlanData: [],
      complaintThead: ['科目', '数量'],
      complaintData: [],
      trainThead: ['科目', '培训人数', '完成人数'],
      trainData: [],
      insuranceThead: ['科目', '人数'],
      insuranceData: [],
      time: null,
      load: null
    }
  },
  mounted() {
    this.load = this.$loading({
      lock: true,
      text: '加载中...',
      spinner: 'el-icon-loading',
      background: 'rgba(0, 0, 0, 0.7)'
    });

    let date = new Date()
    this.time = date.getFullYear() + '年' + (date.getMonth() + 1) + '月'
    this.getMonthSalarChart()
    this.getMonthSalaryTableData()
    this.getProjectPostChart()
    this.getDailyPlanChart()
    this.getSpecialPlanChart()
    this.getComplaintChart()
    this.getTrainChart()
    this.getInsuranceChart()
  },
  methods: {
    // 千分位格式化并保留两位小数
    formatPrice(price) {
      return price.toFixed(2).replace(/\B(?=(\d{3})+(?!\d))/g, ",");
    },
    // 获取当月天数
    getDaysInMonth() {
      const today = new Date();
      const currentYear = today.getFullYear();
      const currentMonth = today.getMonth() + 1;
      const nextMonth = new Date();
      nextMonth.setFullYear(currentYear, currentMonth, 1);
      nextMonth.setDate(nextMonth.getDate() - 1);
      return nextMonth.getDate();
    },
    // 项目工资走势数据
    async getMonthSalarChart() {
      const { data: res } = await getMonthSalary();
      let xAxisData = []
      let legendData = { show: true, data: ['基本工资', '绩效津贴', '加班工资', '福利津贴', '奖惩金额', '保险金额', '工服金额', '工作计划', '培训费用', '招聘费用', '计划值', '基数值'] }
      let series = []
      let dataNum = this.getDaysInMonth()
      for (let i = 1; i <= dataNum; i++) {
        xAxisData.push(i)
      }
      res.dataVal.forEach((item, index) => {

        let type = { type: 'line' }
        if (index < 10) {
          type = {
            type: 'bar',
            stack: 'Ad',
          }
        }

        let ser = {
          name: legendData.data[index],
          ...type,
          data: item,
        }
        if (index == 0) {
          ser.label = {
            show: true,
            position: 'inside',
            formatter: '{c}'
          }
        }
        series.push(ser)
      })
      this.$refs.projectWageTrendChart.initChart(legendData, xAxisData, series)
      this.load.close();
    },
    // 项目工资表格数据
    async getMonthSalaryTableData() {
      const { data: res } = await getMonthSalaryTable();
      let sum = +res.trainingCost + +res.hireCost + +res.basicSalary + +res.performanceAllowance + +res.overTimeSalary + +res.benefitAllowance + +res.rewardsMoney + +res.insuranceMoney + +res.clothesMoney + +res.workPlanMoney
      let data = [[{ val: '参考值' }, { val: this.formatPrice(res.rv) }],
      [{ val: '计划值' }, { val: this.formatPrice(res.pv) }],
      [{ val: '应付值' }, { val: this.formatPrice(sum) }],
      [{ val: '基本工资' }, { val: this.formatPrice(res.basicSalary) }],
      [{ val: '绩效津贴' }, { val: this.formatPrice(res.performanceAllowance) }],
      [{ val: '加班津贴' }, { val: this.formatPrice(res.overTimeSalary) }],
      [{ val: '福利津贴' }, { val: this.formatPrice(res.benefitAllowance) }],
      [{ val: '奖惩金额' }, { val: this.formatPrice(res.rewardsMoney) }],
      [{ val: '保险金额' }, { val: this.formatPrice(res.insuranceMoney) }],
      [{ val: '工服金额' }, { val: this.formatPrice(res.clothesMoney) }],
      [{ val: '工作计划' }, { val: this.formatPrice(res.workPlanMoney) }],
      ]
      this.tableData = data
    },
    // 项目人员在岗率
    async getProjectPostChart() {
      const { data: res } = await getProjectPostRate();
      this.stastaffOnDutyData = [
        [{ val: '合同人数' }, { val: res.contractNumber },],
        [{ val: '在岗人数' }, { val: res.postNumber },],
        [{ val: '缺编人数' }, { val: res.notPostNumber },],
        [{ val: '已入职' }, { val: res.employedNumber },],
      ]
      let chartData = [{ value: res.dutyRate, name: '已在岗' },
      { value: res.vacancyRate, name: '缺编率' }]
      this.$refs.staffOnDutyRate.initChart(chartData)
    },
    // 日工作计划完成占比图
    async getDailyPlanChart() {
      const { data: res } = await getSunWorkPlanSuccessRate();
      this.dailyPlanData = [
        [{ val: '已完成' }, { val: res.successNumber },],
        [{ val: '未完成' }, { val: res.unSuccessNumber },],
        [{ val: '系统确认' }, { val: res.defaultNumber },],
        [{ val: '客户确认' }, { val: res.confirmNumber },],
      ]
      let chartData = [{ value: res.successRate, name: '已完成' },
      { value: res.unSuccessRate, name: '未完成' },]
      this.$refs.dailyPlanRate.initChart(chartData)
    },
    // 专项计划完成率
    async getSpecialPlanChart() {
      const { data: res } = await getSpecialWorkPlanSuccessRate();
      this.specialPlanData = [
        [{ val: '已完成' }, { val: res.successNumber },],
        [{ val: '未完成' }, { val: res.unSuccessNumber },],
        [{ val: '系统确认' }, { val: res.defaultNumber },],
        [{ val: '客户确认' }, { val: res.confirmNumber },],
      ]
      let chartData = [{ value: res.successRate, name: '已完成' },
      { value: res.unSuccessRate, name: '未完成' },]
      this.$refs.specialPlanRate.initChart(chartData)
    },
    // 投诉处置
    async getComplaintChart() {
      const { data: res } = await getComplaintsSuccessRate();

      this.complaintData = [
        [{ val: '客诉数' }, { val: res.complaintsNumber },],
        [{ val: '未处理' }, { val: res.unHandleNumber },],
        [{ val: '处理中' }, { val: res.handleOnNumber },],
        [{ val: '已处理' }, { val: res.handleNumber },],
      ]
      let chartData = [{ value: res.handleOnRate ? res.handleOnRate : 0, name: '处理中' },
      { value: res.handleRate ? res.handleRate : 0, name: '已处理' },
      { value: res.unHandleRate ? res.unHandleRate : 0, name: '未处理' },]
      this.$refs.complaintRate.initChart(chartData)
    },
    // 培训完成率
    async getTrainChart() {
      const { data: res } = await getTrainSuccessRate();

      this.trainData = [
        [{ val: '入职培训' }, { val: res.rzNumber }, { val: res.rzSuccessNumber },],
        [{ val: '岗前培训' }, { val: res.gqNumber }, { val: res.gqSuccessNumber },],
        [{ val: '专项培训' }, { val: res.zxNumber }, { val: res.zxSuccessNumber },],
        [{ val: '合计' }, { val: (res.rzNumber + res.gqNumber + res.zxNumber) }, { val: (res.rzSuccessNumber + res.gqSuccessNumber + res.zxSuccessNumber) },],
      ]
      let chartData = [{ value: res.successRate ? res.successRate : 0, name: '培训完成' },
      { value: res.unSuccessRate ? res.unSuccessRate : 0, name: '培训未完成' },]
      this.$refs.trainRate.initChart(chartData)
    },
    // 项目员工出险数
    async getInsuranceChart() {
      const { data: res } = await getInsuranceRate();

      this.insuranceData = [
        [{ val: '在保人数' }, { val: res.insuranceNumber },],
        [{ val: '缺保人数' }, { val: res.unInsuranceNumber },],
        [{ val: '出险人数' }, { val: res.dangerNumber },],
        [{ val: '结案人数' }, { val: res.closeNumber },],
      ]
      let chartData = [{ value: res.insuranceRate ? res.insuranceRate : 0, name: '在保率' },
      { value: res.unInsuranceRate ? res.unInsuranceRate : 0, name: '缺保率' },]
      this.$refs.insuranceRate.initChart(chartData)
    },
    goToUrl(active) {
      this.$router.push({ path: '/HRAndContract/item', query: { active } })
    }
  }

}
</script>
<style lang="scss" scoped>
.HRAndContract {
  background: #F2F4FC;
  height: 100vh;
  width: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;

  .title {
    line-height: 39px;
    color: rgba(0, 0, 0, 1);
    font-size: 28px;
    text-align: center;
  }

  .HRAndContract_content {
    flex-grow: 1;
    height: 100%;
    padding: 16px 22px;
    box-sizing: border-box;

    .HRAndContract_content_top {
      height: 53%;
      background-color: rgba(255, 255, 255, 0.6);
      margin-bottom: 22px;
      display: flex;
      border-radius: 6px;
      padding: 22px;
      box-sizing: border-box;
      justify-content: space-between;

      .HRAndContract_chart {
        // border: 1px solid red;
        width: 88%;
        height: 100%;
      }

      .HRAndContract_table {
        // border: 1px solid red;
        width: 16%;
        height: 100%;
        display: flex;
        flex-direction: column;
        box-sizing: border-box;
        // padding-top: 32px;
        // border: 1px solid #ddd;

        // >div:nth-child(2) {
        //   flex-grow: 1;
        // }
      }
    }

    .HRAndContract_content_bottom {
      height: 45%;
      overflow: hidden;
      box-sizing: border-box;
      display: flex;
      flex-wrap: nowrap;
      margin: 0 -10px;
      justify-content: space-between;

      .HRAndContract_content_item {
        background-color: rgba(255, 255, 255, 0.6);
        // flex-grow: 1;
        margin: 0 10px;
        padding: 22px;
        box-sizing: border-box;
        border-radius: 6px;
        // flex-shrink: 1;
        width: 16%;
        // overflow: hidden;
        // overflow-y: scroll;
        display: flex;
        flex-direction: column;
        justify-content: space-between;

        .title {
          font-size: 18px;
        }

      }
    }
  }
}
</style>
